
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Turn checkboxes and radio buttons into toggle switches">
    <meta name="author" content="Mattia Larentis, Emanuele Marchi and Peter Stein">
    <title>table</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/highlight.css" rel="stylesheet">
    <link href="https://unpkg.com/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet">
    <!--<link href="https://getbootstrap.com/assets/css/docs.min.css" rel="stylesheet">-->
    <!--<link href="css/main.css" rel="stylesheet">-->
</head>
<body>
<p>通过Data属性的方式，无需编写JavaScript启用bootstrap table, 设置 data-toggle="table" 即可</p>
<div class="alert alert-danger">
    <p>1.这种方式不太常用，因为分页不方便</p></div>
<table data-toggle="table">
    <thead>
    <tr>
        <th>Item ID</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Item 1</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Item 2</td>
        <td>$2</td>
    </tr>
    </tbody>
</table>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<script src="https://unpkg.com/bootstrap-switch"></script>
 
</body>
</html>